<?php
/**
 * 图片展示页
 *
 * @package custom
 *
 */
?>

<?php if (!defined('__TYPECHO_ROOT_DIR__')) exit;
$this->need('header.php');?>


<link rel="stylesheet" type="text/css" href="<?php $this->options->themeUrl('resources/pics/lightgallery/css/lightgallery.min.css'); ?>" />
<link rel="stylesheet" type="text/css" href="<?php $this->options->themeUrl('resources/pics/style.css?'.date('YmdHi')); ?>" />
<link rel="stylesheet" type="text/css" href="<?php $this->options->themeUrl('resources/pics/bootstrap.css'); ?>" />
<link rel="stylesheet" type="text/css" href="<?php $this->options->themeUrl('resources/pics/zxf_page.css'); ?>" />
<!--[if lt IE 9]>
<script src="//cdnjscn.b0.upaiyun.com/libs/html5shiv/r29/html5.min.js"></script>
<script src="//cdnjscn.b0.upaiyun.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
<script type="text/javascript" src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="<?php $this->options->themeUrl('resources/pics/js/masonry-docs.min.js'); ?>"></script>
<script type="text/javascript" src="<?php $this->options->themeUrl('resources/pics/lightgallery/js/lightgallery.min.js'); ?>"></script>
<script type="text/javascript" src="<?php $this->options->themeUrl('resources/pics/lightgallery/js/lg-pager.min.js'); ?>"></script>
<script type="text/javascript" src="<?php $this->options->themeUrl('resources/pics/lightgallery/js/lg-autoplay.min.js'); ?>"></script>
<script type="text/javascript" src="<?php $this->options->themeUrl('resources/pics/lightgallery/js/lg-fullscreen.min.js'); ?>"></script>
<script type="text/javascript" src="<?php $this->options->themeUrl('resources/pics/lightgallery/js/lg-zoom.min.js'); ?>"></script>
<script type="text/javascript" src="<?php $this->options->themeUrl('resources/pics/lightgallery/js/lg-thumbnail.min.js'); ?>"></script>
<script type="text/javascript" src="<?php $this->options->themeUrl('resources/pics/js/zxf_page.js'); ?>"></script>


<script type="text/javascript">if(history.length < 2){$('.header-post-back').css('opacity', 0);}</script>
<script type="text/javascript">
    $(function() {
        //瀑布流
        var $container = $('#masonry');
        $container.imagesLoaded(function() {
            $container.masonry({
                itemSelector: '.post-item',
                gutter: 0,
                isAnimated: false,
            });
        });
        //灯箱
        var lg = document.getElementById('masonry');
        lightGallery(lg, {
            selector: '.post-item',
            download: false,
            enableTouch: true
        });
    });
</script>


<?php
if ($this->cid == null){ ?>
    <!-- head section -->
    <section class="content-top-margin page-title page-title-small border-bottom-light border-top-light">
        <div class="container">
            <div class="row">
                <div class="col-lg-8 col-md-7 col-sm-12 wow fadeInUp" data-wow-duration="300ms">
                    <!-- page title -->
                    <h1 class="black-text"><?php $this->archiveTitle(array(
                            'category'  =>  _t('分类 %s 下的文章'),
                            'search'    =>  _t('包含关键字 %s 的文章'),
                            'tag'       =>  _t('标签 %s 下的文章'),
                            'author'    =>  _t('%s 发布的文章')
                        ), '', ''); ?></h1>
                    <!-- end page title -->
                </div>
            </div>
        </div>
    </section>
    <!-- end head section -->
<?php } else { ?>
    <div class="content">
        <div id="masonry" class="post row" style="top:10px;">
            <?php
            //$this->archiveTitle();
            $imgs = getContentImg($this->cid);
            foreach ($imgs as $img) {
                //加style="display:none;"是因为用js做分页
                echo "<div style=\"display:none;\" class=\"post-item col-xs-6 col-sm-4 col-md-3\" data-src=\"$img[1]\"><img   src=\"$img[1]\" title=\"$img[0]\" class=\"post-item-img\"></div>";
            }
            ?>
        </div>
        <!--<div class="post-info-box"/>-->
        <!--<div class="post-info">
            <div class="post-info-box"><span class="glyphicon glyphicon-picture" aria-hidden="true"></span><span class="post-info-title anti-select">标题：</span><span class="post-info-text"><?php /*echo $this->title */?></span></div>
            <div class="post-info-box"><span class="glyphicon glyphicon-camera" aria-hidden="true"></span><span class="post-info-title anti-select">拍摄/来源：</span><span class="post-info-text"><?php /*echo $this->fields->photog != "" ? ($this->fields->srcurl != "" ? '<a href="'.$this->fields->srcurl.'" target="_blank">'.$this->fields->photog.'</a>' : $this->fields->photog) : '未填写' */?></span></div>
            <div class="post-info-box"><span class="glyphicon glyphicon-user" aria-hidden="true"></span><span class="post-info-title anti-select">出镜：</span><span class="post-info-text"><?php /*echo $this->fields->appear != "" ? $this->fields->appear : '未知' */?></span></div>
            <span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span><span class="post-info-title anti-select">描述：</span><span class="post-info-text"><?php /*echo $this->fields->description != "" ? $this->fields->description : ($this->options->picdesc ? $this->options->picdesc : '未填写') */?></span>
        </div>-->
    </div>
    <div class="zxf_pagediv"></div>
    <script type="text/javascript">
        /*
         * js实现分页，适用于数据div被外层div包含的情况
         * <div id="masonry">
         *     <div src="data"/>
         *     <div src="data"/>
         *     <div src="data"/>
         *     ...
         * </div>
         */
        var len = 12;//定义每页长度
        var $wrapper = $("div#" + "masonry");


        /*
         * 业务逻辑
         */
        var all = $wrapper.find("div").length;
        var cnt = Math.ceil(all / len);
        var pre = 1;//记录之前的页数
        //
        function show(page,len,attr) {
            var start = (page-1) * len;
            var end = start + len;
            for (var i = start ; i < end;i++)
                $wrapper.find("div:eq(" + i + ")").attr("style","display:"+attr+";");
        }
        //show(1,all,'none');//关闭所有div显示，性能更好一点应该是服务器端在每个div上加display:none
        show(1,len,'block');//显示第一页
        //翻页
        $(".zxf_pagediv").createPage({
            pageNum: cnt,
            current: 1,
            backfun: function(e) {
                if (e.current < 1 || e.current > cnt){
                    alert('当前页数不存在，回到首页！');
                    e.current = 1;
                }
                show(pre,len,'none');//隐藏上一页
                show(e.current,len,'block');//显示当前页
                pre = e.current;//记录当前页
            }
        });
    </script>
<?php } ?>



<?php $this->need('footer.php'); ?>
